<template>
  <div>
    <div class="head-container">
      <!-- 搜索 -->
      <el-input
        clearable
        size="small"
        placeholder="模糊搜索"
        style="width: 200px"
        class="filter-item"
      />
      <el-date-picker
        :default-time="['00:00:00', '23:59:59']"
        type="daterange"
        range-separator=":"
        size="small"
        class="date-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button size="small" icon="el-icon-search" type="success"
        >搜索</el-button
      >
      <el-button size="small" icon="el-icon-refresh-left" type="warning"
        >重置</el-button
      >
    </div>
    <div class="middle-container">
      <el-row>
        <el-button size="small" class="btn" icon="el-icon-plus" type="primary"
          >新增</el-button
        >
        <el-button size="small" class="btn" icon="el-icon-edit" type="success"
          >修改</el-button
        >
        <el-button size="small" class="btn" icon="el-icon-delete" type="danger"
          >删除</el-button
        >
        <el-button
          size="small"
          class="btn"
          icon="el-icon-download"
          type="warning"
          >导出</el-button
        >
      </el-row>
      <el-button-group>
        <el-button icon="el-icon-edit"></el-button>
        <el-button icon="el-icon-share"></el-button>
        <el-button icon="el-icon-delete"></el-button>
      </el-button-group>
    </div>
    <div>
      <el-table
        ref="shopList"
        :data="shopList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="名称" width="120">
          <!-- 树状图 -->
          <template slot-scope="">
            <div>
              <el-tree
                :props="shopList.name"
                :load="loadNode"
                lazy
                show-checkbox
                @check-change="handleCheckChange"
              >
              </el-tree>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="enable" label="状态" width="120">
        </el-table-column>
        <el-table-column
          prop="createtime"
          label="创建日期"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" class="optation">
          <template>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="edit()"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              v-popover:popper
              icon="el-icon-delete"
            ></el-button>
            <el-popover class="nonebt" ref="popper" placement="top">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="removeItem()"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference"></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { DepartProducts } from "@/api/DepartmentManagement";
export default {
  name: "DepartmentManagement",
  data() {
    return {
      shopList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    DepartProducts().then((res) => {
      let _self = this;
      console.log(res);
      _self.shopList = res.content;
      console.log(_self.shopList);
      this.$set(res.content[0], "createtime", res.content.createtime);
    });
  },
};
</script>

<style>
.head-container {
  display: flex;
}

.middle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>